'use strict';

import React, {Component, PropTypes} from 'react';
import {Input} from 'amazeui-react';
import Select from './select';
import {Unit, Area} from '../lib';
import {STRING, OPTION} from '../res';

let base = [{
	value: '',
	label: '不限',
}];

export default class Filter extends Component {
	/*
	 * 构造函数。
	 * @param props 组件属性。
	 */
	constructor(props) {
		super(props);
		this.state = {};
	}

	/*
	 * 处理在筛选编制人时按回车。
	 * @param e 事件
	 */
	handleWriterKeyDown(e) {
		if (e.keyCode === 13) {
			this.refs.writer.getFieldDOMNode().blur();
			let value = this.refs.writer.getValue();
			this.props.writerOnFilter(value);
		}
	}

	/*
	 * 筛选年份按回车时。
	 * @param e 事件
	 */
	handleYearKeyDown(e) {
		if (e.keyCode === 13) {
			this.refs.year.getFieldDOMNode().blur();
			let value = this.refs.year.getValue();
			this.props.yearOnFilter(value);
		}
	}

	/*
	 * 渲染。
	 */
	render() {
		const width = 200;
		const inputClassName = 'am-vertical-align-middle';

		const filterStyle = {
			padding: 16,
			border: '1px solid #dedede',
			backgroundColor: '#ffffff'
		};

		const writerStyle = {
			width,
			display: this.props.writer !== undefined ? 'inline-block' : 'none',
			
		};

		const yearStyle = {
			width,
			display: this.props.year !== undefined ? 'inline-block' : 'none'
		};
		let StatisticalYear = [{label:'不限',value:''}];
		for(let i =2017;i<2027;i++){
			StatisticalYear.push({label:i.toString(),value:i.toString()})
		}
		let  statisticalTerm = [{label:'不限',value:''},{label:'上学期',value:'1'},{label:'下学期',value:'2'}]
		return (
			<div style={filterStyle}>
				<Select
					data={StatisticalYear}
					onChange={this.props.StatisticalYear.bind(this)}
					placeholder={[STRING.StatisticalYear]}
					className={this.props.StatisticalYearField==1 ? 'am-show' : 'am-hide'}
				/>
				<Select
					data={statisticalTerm}
					onChange={this.props.statisticalTerm.bind(this)}
					placeholder={[STRING.statisticalTerm]}
					className={this.props.statisticalTermField ==1 ? 'am-show' : 'am-hide'}
				/>
				<Select
					data={base.concat(Area.toOptions(localStorage.area))}
					onChange={this.props.areaOnFilter.bind(this)}
					placeholder={[STRING.area]}
					className={this.props.area ? 'am-show' : 'am-hide'}
				/>
				<Select
					data={base.concat(OPTION.term)}
					onChange={this.props.termOnFilter.bind(this)}
					placeholder={[STRING.term]}
					className={this.props.term ? 'am-show' : 'am-hide'}
				/>
				<Select
					data={base.concat(Unit.toOptions(localStorage.unit, 'unitClass', 2))}
					onChange={this.props.schoolOnFilter.bind(this)}
					placeholder={[STRING.relevanceSchool]}
					className={this.props.school ? 'am-show' : 'am-hide'}
				/>
				<div
					className={inputClassName}
					style={writerStyle}
				>
					
					<Input
						type="text"
						ref="writer"
						style={{height:37,
						marginTop:0
						}}
						placeholder={this.props.writer == false?STRING.statisticalSearch:STRING.placeholderName}
						onKeyDown={this.handleWriterKeyDown.bind(this)}
						className={this.props.writer ? 'am-show' : 'am-hide'}
					/>
					 
				</div>
				<div
					className={inputClassName}
					style={yearStyle}
				>
					<Input
						type="number"
						ref="year"
						placeholder={STRING.placeholderYear}
						onKeyDown={this.handleYearKeyDown.bind(this)}
					/>
				</div>
			</div>
		);
	}
}

Filter.propTypes = {
	area: PropTypes.bool,
	areaOnFilter: PropTypes.func,
	term: PropTypes.bool,
	termOnFilter: PropTypes.func,
	writerOnFilter: PropTypes.func,
	school: PropTypes.bool,
	schoolOnFilter: PropTypes.func,
	year: PropTypes.bool,
	yearOnFilter: PropTypes.func,
};
Filter.defaultProps = {
	areaOnFilter: () => {},
	termOnFilter: () => {},
	statisticalTerm: () => {},
	statisticalSearch: () => {},
	StatisticalYear: () => {},
	writerOnFilter: () => {},
	schoolOnFilter: () => {},
	yearOnFilter: () => {},
};
